{% extends "base.html" %} {% block html_title %} 上线信息 {% endblock html_title %} {% block page_title %} 上线信息 {% endblock page_title %} {% block content %}
<div id="content">
    <el-row>
        <el-col :span="12">
            {% if current_user.is_admin %}
            <button type="primary" @click="onAgentSelectFormOpen" style='padding:7px 20px;outline:none;border:none;margin-left:10px;border-radius:5px;background:#3c8dbc;color:white'>从现有群成员添加上线</button>
            {% endif %}
        </el-col>
        <el-col :span="2" style="font-weight: bold; font-size: 18px;">
            总下注
        </el-col>
        <el-col :span="2" style="font-weight: bold; font-size: 18px;">
            {{totalWager}}
        </el-col>

    </el-row>
    <el-row>
        <el-collapse accordion @change="agentPlayerListOpen">
            <el-collapse-item v-for="agent in agents" :name="agent.wxid">
                <template slot="title">
                    <el-row style="margin-left: 10px;">
                        <el-col :span="6">
                            <b>{{agent.nickname}}</b>
                        </el-col>
                        <el-col :span="6">
                            <b>{{agent.alias || agent.wxid}}</b>
                        </el-col>
                        <el-col :span="2">
                            累计下注
                        </el-col>
                        <el-col :span="2">
                            {{agent.agentedWagerAmount}}
                        </el-col>
                    </el-row>
                </template>
                <el-row>
                    <el-table :data="agentPlayers">
                        <el-table-column prop="nickname" label="玩家昵称">
                        </el-table-column>
                        <el-table-column prop="alias" label="微信号">
                        </el-table-column>
                        <el-table-column prop="wagerAmount" label="下注积分">
                        </el-table-column>
                    </el-table>
                </el-row>
                <el-row>
                    <el-pagination background layout="prev, pager, next" :total="agentPlayerCount" page-size=30 :current-page.sync="currentAgentPlayerPage" @current-change="onCurrentAgentPlayerPageChanged">
                    </el-pagination>
                </el-row>
            </el-collapse-item>
        </el-collapse>
    </el-row>
    <el-dialog :visible.sync="agentSelectFormVisible" title="添加上线">
        <el-row>
            <input type="text" placeholder='输入上线昵称' @keyup.enter='queryByNickname' v-model="qs" style='padding:7px;border-radius: 5px;border:none'> {#
            <input type="text" placeholder='输入上线昵称' v-model="qs" @input="queryByNickname" style='padding:7px;border-radius: 5px;border:none'>#}
            <el-button type="primary" @click="queryByNickname" size="mini">搜索</el-button>
        </el-row>
        <el-row>
            <el-table :data="players" style="height: 400px; overflow-y: auto;">
                <el-table-column prop="nickname" label="上线昵称">
                </el-table-column>
                <el-table-column prop="alias" label="微信号">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button :disabled="scope.row.agent.wxid === scope.row.wxid" type="success" size="mini"
                                   @click="selectAgent(scope.row)">
                            指定为上线
                        </el-button>
                        <el-button :disabled="scope.row.agent.wxid !== scope.row.wxid" type="danger" size="mini"
                                   @click="revokeAgent(scope.row)">
                            取消上线
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-pagination background layout="prev, pager, next" :total="playerCount" page-size=30 :current-page.sync="currentPage" @current-change="onCurrentPageChanged">
            </el-pagination>
        </el-row>
    </el-dialog>
    {% if current_user.is_admin %}
    <el-dialog :visible.sync="revokeAgentConfirmFormVisible" title="确认取消上线">
        <el-row>
            <ul>
                此操作会删除当前上线所有的下线信息
            </ul>
        </el-row>
        <el-form v-loading="revokeAgentConfirmFormBlocking" element-loading-text="取消上线 &hellip;" element-loading-spinner="el-icon-loading">
            <el-form-item>
                <el-button type="danger" @click="onConfirmRevokeAgent">清除上线</el-button>
                <el-button @click="revokeAgentConfirmFormVisible = false" class='el-dialog__close'>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    {% endif %}
</div>
{% endblock content %} {% block js %}
<script>
var container = new Vue({
    el: "#content",
    data: function() {
        return {
            currentPage: 1,
            qs: '',
            playerCount: 0,
            players: [],
            agentCount: 0,
            currentAgentWxid: '',
            agents: [],
            agentPlayerCount: 0,
            agentPlayers: [],
            currentAgentPlayerPage: 1,
            agentSelectFormVisible: false,
            revokeAgentConfirmFormVisible: false,
            revokeAgentConfirmFormBlocking: false,
            targetAgentWxid: '',
            totalWager: 0
        }
    },
    methods: {
        onCurrentAgentPlayerPageChanged: function(currentPage) {
            this.refreshAgentPlayerList();
        },
        onCurrentPageChanged: function(currentPage) {
            this.refreshPlayerList();
        },
        onAgentSelectFormOpen: function() {
            this.refreshPlayerList();
            this.agentSelectFormVisible = true;
        },
        selectAgent: function(row) {
            this.$http.post(
                '/api/agent/',
                {wxid: row.wxid}
            ).then((res) => {
                this.refreshPlayerList();
                this.refreshAgentList();
                this.$notify({
                    title: "成功",
                    message: "添加上线成功",
                    type: "success"
                });
            }).catch((err) => {
                this.$notify.error({
                    title: "添加上线失败",
                    message: err.response.data.message
                });
            });
        },
        revokeAgent: function(row) {
            this.revokeAgentConfirmFormVisible = true;
            this.targetAgentWxid = row.wxid
        },
        onConfirmRevokeAgent: function () {
            if (! this.targetAgentWxid) {
                return;
            }
            this.revokeAgentConfirmFormBlocking = true;
            var params = {wxid: this.targetAgentWxid};
            this.$http.delete('/api/agent/',{
                data: params
            }).then((res) => {
                this.refreshPlayerList();
                this.refreshAgentList();
                this.$notify({
                    title: "成功",
                    message: "取消上线成功",
                    type: "success"
                });
                this.revokeAgentConfirmFormBlocking = false;
                this.revokeAgentConfirmFormVisible = false
            }).catch((err) => {
                this.$notify.error({
                    title: "取消上线失败",
                    message: err.response.data.message
                });
                this.revokeAgentConfirmFormBlocking = false;
                this.revokeAgentConfirmFormVisible = false
            });
        },
        agentPlayerListOpen: function(target) {
            this.currentAgentWxid = target;
            this.refreshAgentPlayerList();
        },
        queryByNickname: function(v) {
            this.refreshPlayerList();
        },
        refreshPlayerList: function() {
            var params = {};
            params.page = this.currentPage - 1;
            if (this.qs !== '') {
                params.qs = this.qs;
            }
            this.$http.get('/api/player/', {
                params: params
            }).then((res) => {
                this.players = res.data.players;
                this.playerCount = res.data.count;
            });
        },
        refreshAgentList: function() {
            this.$http.get('/api/agent/').then((res) => {
                this.agents = res.data.agents;
                this.agentCount = res.data.count;
                this.totalWager = res.data.totalWager;
            });
        },
        refreshAgentPlayerList: function() {
            var params = {};
            params.page = this.currentAgentPlayerPage - 1;
            if (this.currentAgentWxid) {
                this.$http.get('/api/agent/' + this.currentAgentWxid, {
                    params: params
                }).then((res) => {
                    this.agentPlayers = res.data.players;
                    this.agentPlayerCount = res.data.count;
                });
            }
        }
    },
    created: function() {
        this.refreshAgentList();
    }
});
</script>
{% endblock js %}